<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      margin:0;
    }
    div{
      width:100px;
      height:100px;
    }
    #father {
      position: relative;
      background: pink;
    }
    #son {
      position: absolute;
      right: -110px;
      background: red;
    }
  </style>
</head>
<body>

<div style="position: fixed; top:100px;bottom:100px;left:100px;right:100px">
  <div id="father">
    father
    <div id="son">
      son
    </div>
  </div>
</div>

<script>
  son.onclick = () => alert('son');
  father.onclick = () => alert('father');

  //虽然son现在不再father内部了
  //但
  //你会发现点击son 依然会冒泡触发father的事件回调

  //所以冒泡和页面显示出来的位置是没关系的，而是跟html代码中的位置有关系
</script>
</body>
</html>
